React函数式组件

2024-07-16 19:50| 来源: 网络整理| 查看: 265

函数式组件

顾明思义，函数就是组件，组件就是一个函数。函数式组件长啥呢？没错，就是如下面这样的

function App(){ return ( hello,nice to meet you ); }

1、看看函数式组件有哪些特点？

组件的第一个参数是props，它是不可改变的，函数不能更改输入参数(接收父级传来的信息) 组件中return必须写(定义该组件要渲染的内容) 生命周期，无this，无state 单向数据流(数据必须从较高的组件流向较低的组件) 补充：React 16.7(beta)之前，函数组件一直被当做纯渲染组件来使用

2、组件如何传递数据的？子级组件函数中默认有一个props参数，子级通过 props.自定义属性获取父级传来的值

父级 function 父级组件(){ return( ) 子级 function 子级组件(props){ return( { props.自定义的属性} ); }

具体示例如下：

export default function App() { //父级 return ( { /* 不能这样写，无法使父级直接传给孙子级信息 */} { /* */} ); } function Child(props) { //子级 console.log(props);//{info: "父级传给子级的信息"} return ( 1-{ props.info} { /* */} { /* 下面这种方式实现了父级传给孙子级信息的目的 */} //孙子级 console.log(props);//{info2: "父级的子级传给子级的信息"} return ( 2-{ props.info2} ); }

3、React hooks React hooks是React 16.8中的新增功能。它们使您无需编写类即可使用状态和其他React功能 3-1、 hook的优点：

简化组件逻辑复用状态逻辑无需使用类组件编写

3-2、常用

【本文地址】

公司简介

联系我们